<template>
    <a-select v-model:value="value"  style="width: 150px" @click="getTeacherCourse">
        <a-select-option :value="item.courseNo" v-for="item in courseList" @click="onButton">{{item?.courseName}}</a-select-option>
        <!--        <a-select-option value="Option2-2">Option2-2</a-select-option>-->
    </a-select>
    <a-select v-model:value="value1"  style="width: 150px" >
        <a-select-option :value="item.classNo" v-for="item in courseList" @click="onButtons">{{item?.classNo}}</a-select-option>
        <!--        <a-select-option value="Option2-2">Option2-2</a-select-option>-->
    </a-select>
    <a-button type="primary"  @click="getCourseStudent">查询</a-button>

    <a-table :columns="columns" :data-source="dataSource" bordered>
        <template #bodyCell="{ column, text, record }">
            <template v-if="['score'].includes(column.dataIndex)">
                <div>
                    <a-input
                            v-if="editableData[record.studentNo]"
                            v-model:value="editableData[record.studentNo][column.dataIndex]"
                            style="margin: -5px 0"
                    />
                    <template v-else>
                        {{ text }}
                    </template>
                </div>
            </template>
            <template v-else-if="column.dataIndex === 'operation'">
                <div class="editable-row-operations">
          <span v-if="editableData[record.studentNo]">
            <a-typography-link @click="save(record.studentNo , record)">Save</a-typography-link>
            <a-popconfirm title="Sure to cancel?" @confirm="cancel(record.studentNo)">
              <a>Cancel</a>
            </a-popconfirm>
          </span>
                    <span v-else>
            <a @click="edit(record.studentNo)">Edit</a>
          </span>
                </div>
            </template>
        </template>
    </a-table>
</template>
<script setup lang="ts">
import { cloneDeep } from 'lodash-es';
import {defineComponent, onMounted, reactive, ref} from 'vue';
import type { UnwrapRef } from 'vue';
import myAxios from "../../plugins/myAxios";
import {message} from "ant-design-vue";
import type { Dayjs } from 'dayjs';
import dayjs from "dayjs";
const columns = [

    {
        title: '学号',
        dataIndex: 'studentNo',
        width: '10%',
    },
    {
        title: '课程号',
        dataIndex: 'courseNo',
        width: '10%',
    },
    {
        title: '学期',
        dataIndex: 'term',
        width: '6%',
    },
    {
        title: '学生姓名',
        dataIndex: 'studentName',
        width: '10%',
    },
    {
        title: '性别',
        dataIndex: 'studentGender',
        width: '7%',
    },
    {
        title: '专业',
        dataIndex: 'studentMajor',
        width: '10%',
    },
    {
        title: '班级号',
        dataIndex: 'studentClassNo',
        width: '10%',
    },
    {
        title: '课程名',
        dataIndex: 'courseName',
        width: '10%',
    },
    {
        title: '学时',
        dataIndex: 'courseTime',
        width: '7%',
    },
    {
        title: '学分',
        dataIndex: 'courseScore',
        width: '7%',
    },
    {
        title: '分数',
        dataIndex: 'score',
        width: '15%',
    },
    {
        title: 'operation',
        dataIndex: 'operation',
    },

];

// onMounted(()=>{
//     getCourse()
// })
const courseList = ref([])
const value = ref()
const value1 = ref()
const getTeacherCourse = () =>{
    getCourse()
}
const getCourse = async () => {
    const res = await myAxios.post("/teacher/getTeachCourseNoAndName")
    if (res.data){
        courseList.value=res.data
    }else {
        message.error(res.message)
    }
}

const onButton = () =>{
    // console.log(value.value)
}
const onButtons = () =>{
    // console.log(value1.value)
}


const studentCourseList =ref()
const getCourseStudent = async () => {
    const res = await myAxios.post("/teacher/getScoresInfo",{
        courseNo:value.value,
        classNo:value1.value
    })
    if (res.data){
        studentCourseList.value = res.data
        // console.log(studentCourseList.value)
    }else {
        message.error(res.message)
    }
}

interface DataItem {
    studentNo: string;
    courseNo: string;
    score: number;
    term: string;
    studentName: string;
    studentGender: string;
    studentMajor: string;
    studentClassNo: string;
    courseName: string;
    courseTime: number;
    courseScore: number;
}
const dataSource = ref(studentCourseList);
const editableData: UnwrapRef<Record<string, DataItem>> = reactive({});

const edit = (studentNo: string) => {
    editableData[studentNo] = cloneDeep(dataSource.value.filter(item => studentNo === item.studentNo)[0]);
};
const save = async (studentNo: string,item:any) => {
    console.log(studentNo)
    Object.assign(dataSource.value.filter(item => studentNo === item.studentNo)[0], editableData[studentNo]);
    delete editableData[studentNo];
    console.log(item)
    const res = await myAxios.post("/teacher/saveScores",{
        ...item
    })
    if (res.data){
        message.success("操作成功")
    }else {
        message.error("操作失败")
    }
};
const cancel = (score: string) => {
    delete editableData[score];
};
</script>
<style scoped>
.editable-row-operations a {
    margin-right: 8px;
}
</style>
